<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一次接线图</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
    <button type="button" onclick="save()" class="button save">保存</button>
    <button type="button" onclick="loop()" class="button save">开始动画</button>
    <button type="button" onclick="stop()" class="button save">停止动画</button>
</div>
<div class="container">
    <div class="left-nav" id="dragNav">
    </div>
    <div class="right-container" id="dragContent"></div>
</div>
<script src="release/go.js"></script>
<script>
    var $ = go.GraphObject.make;

</script>
<script src="js/node.js"></script>
<script src="js/main.js"></script>
<script>
    var Diagram = $(go.Diagram, "dragContent", {
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//缩放
        "grid.visible": true,//绘制网格
//        "grid.gridCellSize": new go.Size(30, 20),//设置网格尺寸
        "draggingTool.isGridSnapEnabled": true,//根据网格尺寸移动
        "resizingTool.isGridSnapEnabled": true,

//        "rotatingTool.snapAngleMultiple": 90,
//        "rotatingTool.snapAngleEpsilon": 45,
        "undoManager.isEnabled": true,  // enable undo & redo
        allowDrop: true,
        initialContentAlignment: go.Spot.Center

    })
    Diagram.nodeTemplateMap.add("DXDLJHQ",DXDLJHQ());
    Diagram.nodeTemplateMap.add("DRKG",DRKG());
    Diagram.nodeTemplateMap.add("LRZDYBYQ",LRZDYBYQ());
    Diagram.nodeTemplateMap.add("JDBLQ",JDBLQ());
    Diagram.nodeTemplateMap.add("FHKG",FHKG());
    Diagram.nodeTemplateMap.add("DKQ",DKQ());
    Diagram.nodeTemplateMap.add("SJXBYQ",SJXBYQ());
    Diagram.nodeTemplateMap.add("DRQ",DRQ());
    Diagram.nodeTemplateMap.add("JCQ",JCQ());
    Diagram.nodeTemplateMap.add("XSJXBYQ",XSJXBYQ());
    Diagram.nodeTemplateMap.add("JDX",JDX());
    Diagram.nodeTemplateMap.add("BLQ",BLQ());
    Diagram.nodeTemplateMap.add("DLQ",DLQ());
    Diagram.nodeTemplateMap.add("CTSDLQ",CTSDLQ());
    Diagram.nodeTemplateMap.add("DDXSQ",DDXSQ());
    Diagram.nodeTemplateMap.add("DYBYQ",DYBYQ());
    Diagram.nodeTemplateMap.add("RJDQ",RJDQ());
    Diagram.nodeTemplateMap.add("SC",SC());
    Diagram.nodeTemplateMap.add("FHKG",FHKG());
    Diagram.nodeTemplateMap.add("SDYQHKG",SDYQHKG());
    Diagram.nodeTemplateMap.add("DTDLHGQ",DTDLHGQ());
    Diagram.nodeTemplateMap.add("GLKG",GLKG());
    Diagram.nodeTemplateMap.add("XXBYQ",XXBYQ());
    Diagram.nodeTemplateMap.add("DLHGQ",DLHGQ());
    Diagram.nodeTemplateMap.add("DYHGQ",DYHGQ());


    Diagram.linkTemplate =
        $(go.Link,
            {routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7},
            new go.Binding("points").makeTwoWay(),
            // mark each Shape to get the link geometry with isPanelMain: true
            $(go.Shape, {isPanelMain: true, stroke: "green", strokeWidth: 5}),
            $(go.Shape, {isPanelMain: true, stroke: "green", strokeWidth: 3}),
            $(go.Shape, {
                isPanelMain: true,
                stroke: "white",
                strokeWidth: 1,
                name: "PIPE",
                strokeDashArray: [10, 10]
            }),
            $(go.Shape, {toArrow: "Triangle", fill: "black", stroke: null})
        );
    Diagram.model.linkFromPortIdProperty = 'start'//定位开始连线节点
    Diagram.model.linkToPortIdProperty = 'end'//定位结束连线节点

    var Palette = $(go.Palette, "dragNav", {
        "animationManager.duration": 800,
        nodeTemplateMap: Diagram.nodeTemplateMap,
        initialScale: 0.3//,缩小
    })
    var model = $(go.GraphLinksModel)

    var $baseUrl = 'images/'
    model.nodeDataArray = [
        {category: "DXDLJHQ", name: "单项电流互感器", img: $baseUrl + "4bd14b05b2c7ff7d38c6223745ee85b0.png"},
        {category: "DRKG", name: "刀熔开关", img: $baseUrl + "5b8e537a565165365c5ad2fd81c75561.png"},
        {category: "LRZDYBYQ", name: "两绕组电压变压器", img: $baseUrl + "03d25a844de218f43527d5b853572048.png"},
        {category: "JDBLQ", name: "接地避雷器", img: $baseUrl + "04ea7eaf1ee7c07ba5e7aa14018d0af3.png"},
        {category: "FHKG", name: "负荷开关", img: $baseUrl + "6f6d0b127b26fa11d4d813c464d5b61b.png"},
        {category: "DKQ", name: "电抗器", img: $baseUrl + "41ad7359bfdd4d6764d256558ab7a0d9.png"},
        {category: "SJXBYQ", name: "三角形变压器", img: $baseUrl + "0659de7e9307125fdcc1791158d3ecec.png"},
        {category: "DRQ", name: "电容器", img: $baseUrl + "803b694cdeebf6a026e5cd41008e328e.png"},
        {category: "JCQ", name: "接触器", img: $baseUrl + "895f472b757a9955302b60852ee73470.png"},
        {category: "XSJXBYQ", name: "星三角变压器", img: $baseUrl + "5919e5864c61872ca10c92a1ce901849.png"},
        {category: "JDX", name: "接地线", img: $baseUrl + "6032b68df9430c477325b577755644a1.png"},
        {category: "BLQ", name: "避雷器", img: $baseUrl + "8258d0b16104cb322c88267b52272d8f.png"},
        {category: "DLQ", name: "断路器", img: $baseUrl + "89977f66b2adc1ec183f5891cee5cfb2.png"},
        {category: "CTSDLQ", name: "抽屉式断路器", img: $baseUrl + "897118d454a457467513401f109c1f2e.png"},
        {category: "DDXSQ", name: "带电显示器", img: $baseUrl + "4105946a1e925eb98ef92a1bde34045f.png"},
        {category: "DYBYQ", name: "电压变压器", img: $baseUrl + "a7b596d70ec9b1e758587d36f1e0c248.png"},
        {category: "RJDQ", name: "热继电器", img: $baseUrl + "a38584062f218fc2a196c373d4a4a9b9.png"},
        {category: "SC", name: "输出", img: $baseUrl + "b53322d81e60350a114a6426616cdf0a.png"},
        {category: "FHKG", name: "复合开关", img: $baseUrl + "b74370306e3f6a45a201849c1f1f6fb1.png"},
        {category: "SDYQHKG", name: "双电源切换开关", img: $baseUrl + "be2eb42fb487a3acde2d1f10ff08b456.png"},
        {category: "DTDLHGQ", name: "电压电流互感器", img: $baseUrl + "c9c7de23faf09f15fe01a8cfb992d427.png"},
        {category: "GLKG", name: "隔离开关", img: $baseUrl + "d9d8146fdbcaef2f456b09beecf8af7c.png"},
        {category: "XXBYQ", name: "星型变压器", img: $baseUrl + "d4838be8623ebad9e874684ffd3ae716.png"},
        {category: "DLHGQ", name: "电流互感器", img: $baseUrl + "e0b0ab1c0aba09a0499ca70cbf454433.png"},
        {category: "DYHGQ", name: "电压互感器", img: $baseUrl + "e6d8d00a42307d27885c1d24b59dc812.png"},

    ]
    Palette.model = model;

    Diagram.addDiagramListener("ExternalObjectsDropped", function (e, boj) {//将图形从工具栏拖过来的时候会执行此事件
        Diagram.nodes.each(function (node) {
            var shape = node.findObject("TEXT");
            console.log(shape)
            shape.text = ""//清除文字
        })
    })

    function save() {
        var nodeJson = Diagram.model.toJson()
        console.log(nodeJson)
    }
var stopLoop;

    function loop() {
        Diagram.allowMove = false;
        Diagram.allowDelete = false;
        var diagram = Diagram;
        stopLoop = setTimeout(
            function () {
            var oldskips = diagram.skipsUndoManager;
            diagram.skipsUndoManager = true;
            diagram.links.each(function (link) {
                var shape = link.findObject("PIPE");
                var off = shape.strokeDashOffset - 2;
                shape.strokeDashOffset = (off <= 0) ? 20 : off;
            });
            diagram.skipsUndoManager = oldskips;
            loop();
        }, 100);
    }
    function stop() {
        Diagram.allowMove = true;
        Diagram.allowDelete = true;
        clearTimeout(stopLoop)
    }
</script>
</body>
</html>